import React, { useEffect, useState } from 'react'
import { Row, Col } from 'antd'
import { backgroundObj } from '@/utils/utils'
import MoreComponents from '../MoreComponents'
import defaultImg from '../image/defaultImg.png'
const RenderStyle = (props) => {
    const { data = {} } = props
    const { list = [], top, bottom, countType } = data
    const [renderList, setRenderList] = useState([])
    useEffect(() => {
        if (list.length === 0) {
            setRenderList([
                {
                    cover: defaultImg,
                    title: '此处显示表单名称'
                },
                {
                    cover: defaultImg,
                    title: '此处显示表单名称'
                },
                {
                    cover: defaultImg,
                    title: '此处显示表单名称'
                }
            ])
        }
        else {
            setRenderList(list)
        }
    }, [list.length])
    if (countType === 'list') {
        return <div className='wxPage_Form_style1'>
            <div className='list-style-list'>
                {renderList.map(val => {
                    const { title, cover } = val
                    return <div className='form-item'>
                        <div className='item-image'>
                            <img style={{ width: '100%', height: '100%' }} src={cover || defaultImg}></img>
                        </div>
                        <div className='item-info'>
                            <div className='item-info-title'>{title}</div>
                        </div>
                    </div>
                })}
            </div>
        </div>
    }
    else if (countType === 'bigImage') {
        return <div className='wxPage_Form_style2'>
            <div className='list-style-list'>
                {renderList.map(val => {
                    const { title, cover } = val
                    return <div className='form-item'>
                        <div className='item-image'>
                            <img style={{ width: '100%', height: '100%' }} src={cover || defaultImg}></img>
                        </div>
                        <div className='item-info'>
                            <div className='item-info-title'>{title}</div>
                        </div>
                    </div>
                })}
            </div>
        </div>
    }
    else {
        return <div className='wxPage_Form_style3'>
            <div className='list-style-list'>
                {renderList.map(val => {
                    const { title, cover } = val
                    return <div className='form-item'>
                        <div className='item-image'>
                            <img style={{ width: '100%', height: '100%' }} src={cover || defaultImg}></img>
                        </div>
                        <div className='item-info'>
                            <div className='item-info-title'>{title}</div>
                        </div>
                    </div>
                })}
            </div>
        </div>
    }
}
import './index.less'
import { useSafeState } from 'ahooks'
const FormRender = (props) => {
    const { data = {} } = props
    const { list = [], backgroundColor, backgroundImage, top, bottom, paddingTop, paddingLeft, } = data


    return <div style={{ padding: '0 12px' }}>
        <Row style={{ marginTop: top, marginBottom: bottom, padding: `${paddingTop}px ${paddingLeft}px`, }} className='wxPage_Form'>
            <MoreComponents {...props}></MoreComponents>
            <RenderStyle {...props}></RenderStyle>
        </Row>
    </div>
}
export default FormRender